import React from 'react'
import { createBehavior, createResource } from '@designable/core'
import { DnFC, useNodeIdProps } from '@designable/react'
import { createVoidFieldSchema } from '../Field'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'
import { Result as CustomResult } from '../../customComponents'

export const Result: DnFC<React.ComponentProps<typeof CustomResult>> = (
  props
) => {
  const { title, subTitle, ...rest } = props as any
  const nodeIdProps = useNodeIdProps()
  return (
    <div {...nodeIdProps}>
      <CustomResult {...(rest as any)} title={title} subTitle={subTitle}>
        {props.children}
      </CustomResult>
    </div>
  )
}

Result.Behavior = createBehavior({
  name: 'Result',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'Result',
  designerProps: {
    droppable: true,
    propsSchema: createVoidFieldSchema(AllSchemas.Result),
  },
  designerLocales: AllLocales.Result,
})

Result.Resource = createResource({
  icon: 'Result',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'Result',
        'x-component-props': {
          status: 'info',
          title: 'Title',
          subTitle: 'Sub Title',
        },
      },
    },
  ],
})
